<template>
    <div v-loading="vLoading" element-loading-text="拼命加载中">

        <el-row>
            <el-col :span="8" :offset="2" v-for="item in userData" :key="item">

                <div style="border:solid gainsboro; border-radius: 4px;
              margin-bottom: 15px;background-color: whitesmoke;height: auto;">

                    <el-container>
                        <el-aside style="width: auto;align-content: center;">
                            <el-button type="text" @click="$store.dispatch('resumeDialogVisible', item.userId)">
                                <el-avatar :src="item.headIcon" :size="70"
                                    style="margin-left: 15px;"></el-avatar></el-button>
                        </el-aside>
                        <el-main style="width: 300px;">
                            <el-row>
                                <el-col :span="15"> <el-button type="text"
                                        @click="$store.dispatch('resumeDialogVisible', item.userId)">
                                        <span style="font-size: 20px;color: black;">{{ item.username
                                            }}</span></el-button>
                                </el-col>
                                <el-col :span="1">
                                    <el-button type="text" class="blockUser"
                                        @click="$store.dispatch('blockStatusChange', item)" style="margin-left: 5px;">{{
                                            item.isBlocked ? "取消拉黑" : "拉黑" }}</el-button>
                                </el-col>
                            </el-row>
                            <div style="background-color: black;padding: 0.5px;"></div>
                            <span style="font-size: 14px;">学历：{{ degreeToString(item.degree) }}</span>
                            <span style="font-size: 14px;margin-left: 15px;">电话：{{ item.telephone }}</span>
                        </el-main>
                    </el-container>
                </div>
            </el-col>
        </el-row>
        <div class="block custom-pagination" style="text-align: center;margin-top: 10px;">
            <el-pagination :page-size="pageStrategy.pageSize" @current-change="handleCurrentChange"
                @size-change="handleSizeChange" :page-sizes="[1, 4, 7, 10]" :current-page="pageStrategy.pageNum"
                :total="total" layout="sizes,prev, pager, next">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getBlockUsers } from '@/api/self'

export default {
    data() {
        return {
            vLoading: false,
            // 其他信息之后再加
            total: null,
            pageStrategy: {
                pageNum: 1,
                pageSize: 10,
            },
            userData: []
        }
    },
    methods: {
        degreeToString(num) {
            switch (num) {
                case "0": return "中学"; break;
                case "1": return "高中"; break;
                case "2": return "中专"; break;
                case "3": return "大专"; break;
                case "4": return "本科"; break;
                case "5": return "硕士"; break;
                case "6": return "博士"; break;
            }
        },
        handleCurrentChange(val) {
            this.pageStrategy.pageNum = val
            this.query()
        },
        handleSizeChange(val) {
            this.pageStrategy.pageSize = val
            this.pageStrategy.pageNum = 1
            this.query()
        },
        query() {
            this.vLoading = true
            getBlockUsers(this.pageStrategy).then(res => {
                res.data.list.forEach(element => {
                    element.isBlocked = true
                });
                this.vLoading = false
                this.userData = res.data.list
                this.total = res.data.total
            })
        }
    },
    mounted() {
        this.query()
    }

}
</script>

<style></style>